{% extends 'base.html' %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block title %}Transparency through volunteering{% endblock %}

{% block content %}
<div class="span-5">

<h2>
Want to help fix democracy?
</h2>
<script type="text/javascript">
window.onload = function () { document.getElementById('id_first_name').focus(); }
</script>
<p>Join us in making this the most accountable election ever!</p>
<p><em><a href="/aboutus/">Democracy Club</a></em> is a non-partisan hub for for armchair activists. We suggest small ways in which volunteers can hold our representatives to account.</p>
<p>Interested? Read <a href='/faq/'>our FAQ</a> or jump right in below.</p>
</p>
{% if form %}
  <form action="" method="post" id="signup">
  <table>
  {{ form.as_table }}
  <tr>
   <td></td>
   <td><input type="submit" value="sign up" /></td>
  </tr>
  <tr>
   <td></td>
   <td class="small"><a href='{% url email_reminder %}'>Lost your login information?</a></td>
  </tr>
  </table>
  </form>
 {% endif %}
<p>
When you sign up, we will occasionally suggest tasks by email, <a href="/aboutus/#what">such as</a> gathering information on general election candidates for <a href='http://www.mysociety.org/'>mySociety</a> or finding and sharing election leaflets for <a href='http://www.thestraightchoice.org/'>The Straight Choice</a>, to help them build awesome sites that will make the next election the most transparent ever. We'll also help you to collaborate with other volunteers in your area.
</p>
<!--<p>
We already know that mySociety wants to gather information on general election candidates, and TheStraightChoice wants you to help them find and share election leaflets. As the election approaches there'll be even more things to do, and you can be part of it.
</p>-->

<p class="small">We will occasionally suggest tasks on behalf of other transparency related groups, but we'll never share your private details with anyone, and we'll never send you more than two emails a week, no matter what.  Read our <a href="/aboutus/#privacy">terms and conditions</a> for more.</p>

</div>

<div class="span-3 last">
<div id="visualization"></div>
<p>We're trying to get volunteers in every part of the UK.  So far, we've recruited {{ volunteers }} volunteers in {{ count }} constituencies (out of a total {{ total }}). <a href="/statistics/">Read more about how we're doing</a>. You can also <a href='http://twitter.com/democlub' target="_blank">follow us on Twitter</a> and <a href='http://www.facebook.com/pages/Democracy-Club/316731041785' target="_blank">become a fan on Facebook</a>.</p></p>
<p>
<h3>Recent signups</h3>
{% include "new_signup_list.html" %}
</p>

{% block js %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, '% complete');
  data.setValue(0, 1, {{percent_complete}});

  // Create and draw the visualization.
  var chart = new google.visualization.Gauge(document.getElementById('visualization'));
  var opts = {redFrom: 90, 
              redTo: 100, 
              yellowFrom: 75,
              yellowTo: 90, 
              greenFrom: 35, 
              greenTo: 75};

   chart.draw(data, opts);
}
google.setOnLoadCallback(drawVisualization);
</script>
{% endblock %}


{% endblock %}
